Recently, I had the privilege of designing and building the Wylye Valley Art Trail website.  The 2015 trail consists of 75 venues, and in-excess of 300 artists – I’m sure you’ll agree, that’s a reasonable size!

In many ways, the website had to embrace an “all things, to all people” approach; the content needed to include artist images, alongside an array of useful information pertaining to each venue (e.g. opening times, contact details, map displays, artist information, access arrangements etc).

There was also a fair amount of inconsistency between venues, which needed to be catered for – “square peg, round hole” was a common theme.

Personally, I felt a CMS wasn’t the best option (too much cruft & bloat).  As such I hand-coded the entire project, from the data entry screens through to the final website.  Whilst this was a lot more work from a “coding” perspective, it enabled me to remain in complete control over “bits” being sent across the wire - so to speak.

---

Style

For style, I leant towards Google’s Material Design guide and icononography – it seemed to be appropriate for creating a slick, functional & informative website, yet leaving enough room for artistic display.

Performance

Underlying all the design and information details, was an absolute requirement to maintain a top browsing performance - image based websites and performance, don’t always go hand in hand!

Getting The Right Blend

By utilising many modern tips and techniques, I was able to not only create what I believe, to be a very functional and useable website, but one that also scored highly from a performance aspect, without a sacrifice on aesthetics.

To substantiate this, below are a couple of YSlow screen shots.

The first clearly indicates an overall Grade A score (I was well chuffed with that), whilst the other shows initial home page weight, alongside the much reduced “cached” page weight.

---

At the time of posting, I feel I have utilised a lot of good modern practice – however, I have little doubt that in 18 months time, this will be seen as “so last year” - but isn’t that why we love this industry?

---

Summary of technologies & processes

Stack

• SQL 2014 Database
• ASP.NET 4.5 Web Pages
• Server Side: C# (Razor)
• Front End: HTML, CSS, JavaScript

Tooling

• Visual Studio 2013
• Visual Studio Online Version Control Repository (GIT)
• Web Essentials (VS Plugin)
• SASS (CSS Pre-processor)
• Gulp (Build Process / Task Runner)
• TinyJPG (Image optimisation)

Front End Libraries

• jQuery (JavaScript)
• AngularJS - for the Admin data entry section (JavaScript)
• Bootstrap 3 (CSS)
• Bootstrap Material Design Plugin (JavaScript / CSS)
• Google Maps (JavaScript)
• Media Boxes (JavaScript)
• loadCSS (JavaScript / CSS)
• Some IE fall-back libraries

Performance & Architecture On Server

• Use of Dapper ORM (fastest DotNet ORM)
• Creation of an ASP.NET Web Pages DAL (Data Access Layer) as inspired by @stevelydford blog post
• Extensive use of Database caching
• Server side Minification of CSS & JavaScript
• Server side Cache Busting (without querystrings)
• Extensive use of HTTP Static Content caching & expiration headers

Performance & Architecture On Client

• Use of Gulp to concatenate CSS & JavaScript
• Use of Gulp to auto-prefix CSS
• Use of Gulp to strip out unnecessary CSS using UNCSS
• Use of Local Storage to store a JSON object for all mapping data
• Use of sprites, reducing all map markers down to a single image
• Use of Lazy Loading for gallery images
• Gallery images served from a different domain, to take advantage of browser parallelism
• Use of loadCSS to enable the loading of CSS asynchronously
• Implemented “Critical CSS – Above The Fold” to ensure fast styling on first page load
• Use of JavaScript injected Preload / Prerender to ensure faster access to a predicted “next” page